<!-- 
  component:远程搜索下拉列表
  time:2022/12/15

  1.placeholder:占位符
  示例：
    :placeholder="'Please_enter_customer_ID'"
  2.SelectData：下拉框数据
    此处有有一个重要逻辑，原本这个数据是子组件接收源数据在进行处理，但是这样子无法自适应各种数据的字段，所以使用父组件去进行处理，处理完成在传给子组件
  示例：
    :SelectData="CustomerIDData"
    this.CustomerIDData = CustomerID.data.map((item) => {
      return {value : item.CustomerID.toString() , label : item.CustomerID.toString()}
    })
-->
<template>
  <div class="RangeSearch">
    <el-select
      v-model="employeesData.transshipmentdepot"
      multiple
      filterable
      remote
      reserve-keyword
      :placeholder="$t(placeholder)"
      :remote-method="transshipmentdepotremoteMethod"
      :focus="transshipmentdepotremoteMethod"
      :loading="loading">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data(){
    return{
      options: [],
      value: [],
      list: [],
      loading: false,
      employeesData:{
        transshipmentdepot:'',
      },
      data:[]
    }
  },
  props:{
    placeholder:{
      default(){
        return [];
      }
    },
    SelectData:{
      default(){
        return [];
      }
    }
  },
  methods:{
    transshipmentdepotremoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = []
      }
    }
  },
  watch:{
    SelectData:function(newVal){
      this.options = newVal
      this.list = newVal
    }
  },
}
</script>

<style>

</style>
